<breadcrumb />

<mat-card>
  <mat-card-content>
    <mat-checkbox [(ngModel)]="centered">Centered</mat-checkbox>
    <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
    <mat-checkbox [(ngModel)]="unbounded">Unbounded</mat-checkbox>

    <mat-form-field class="example-ripple-form-field">
      <input matInput [(ngModel)]="radius" type="number" placeholder="Radius" />
    </mat-form-field>
    <mat-form-field class="example-ripple-form-field">
      <input matInput [(ngModel)]="color" type="text" placeholder="Color" />
    </mat-form-field>

    <div
      class="example-ripple-container"
      matRipple
      [matRippleCentered]="centered"
      [matRippleDisabled]="disabled"
      [matRippleUnbounded]="unbounded"
      [matRippleRadius]="radius"
      [matRippleColor]="color"
    >
      Click me
    </div>
  </mat-card-content>
</mat-card>
